<template>
    <div class="blogdetails">

        <div class="usermess">
            <div class="user">
                <!-- <img src="../../../../static/imgs/photo.jpeg" alt=""> -->
                <img :src="this.list.user.photo" alt="">
                <span>
                    <p>
                      <router-link :to='"/userdetails/" + this.list.user.id'>
                        <a href="###">{{this.list.user.name}}</a>
                      </router-link>
                      </p>
                    <p>入驻日期：{{time}}</p>
                </span>
            </div>

            <div class="mess">
              <span>
                <p>{{this.list.user.blogs}}</p>
                <p class="name">博客</p>
              </span>
              <span>
                <p>{{this.list.user.fans}}</p>
                <p class="name">粉丝</p>
              </span>
              <span>
                <p>{{this.list.user.likes}}</p>
                <p class="name">获赞</p>
              </span>
              <span>
                <p>{{this.list.user.comments}}</p>
                <p class="name">评论</p>
              </span>
              <span>
                <p>{{this.list.user.access}}</p>
                <p class="name">访问</p>
              </span>
            </div>

            <div class="button" v-show="self">
            
              <span @click="foucs()" v-show="fou">
                  <a href="###">关注</a>
              </span>
              <span @click="foucs()" class="fou" v-show="delfou">
                  <a href="###">已关注</a>
              </span>
              <router-link :to='"/sendmess/" + this.list.user.id'>
              <span>
                  <a href="###" @click="islogin()">私信</a>
              </span>
              </router-link>
            </div>

            <div class="button" v-show="!self">
              <router-link to="/usercenter">
                <span style="margin-left: 38%;"><a href="###">我的</a></span>
              </router-link>
            </div>

        </div>

        <div class="sortmain">
          <ul>
            <li class="sorttitle">最新文章</li>
            <li v-for="(item,index) in allblog" :key="item.index" :class="{active:index==isShow}" @click="click(index)">
              <router-link :to='"/blogdetails/" + item.blog.id'>
                <a href="###">{{item.blog.title}}</a>
              </router-link>
              <i>{{item.blog.createtime.slice(0,10)}}</i>
            </li>
          </ul>
        </div>

        <div class="detail">
          <div class="main">
            <p class="title">{{this.list.blog.title}}</p>

            <p class="data">
              <span class="sort">分类专栏：<a href="###">{{this.list.blog.clazz}}</a></span>
              <span>{{this.list.blog.createtime.slice(0,10)}}</span>
              <span class="iconfont">&#xe65c; {{this.list.blog.browse}}</span>
              <span class="iconfont">&#xe690; {{this.list.blog.favorite}}</span>
            </p>
            
            <div class="blog ql-snow ql-editor" v-html="this.list.blog.content">
              <!-- <p>  vue中的数据传输大致分为三种：父组件向子组件传递数据、子组件向父组件传递数据、还有没有父子关系的组件之间的数据传递。
              在这里所要讲的是没有父子关系的组件之间的数据传递，用传统的ajax实现较为麻烦。所以采用eventBus总线传递数据。
              eventBus原理可参考https://juejin.im/entry/58a2ca380ce46300564c3d3a</p> -->
              {{this.list.blog.content}}
            </div>
            <p class="icon">
              <span class="iconfont" v-show="god"><a href="###" title="点赞"
              @click="good()">&#xe6d4;</a> <i>{{this.list.blog.likes}}</i></span>
              <span class="iconfont" v-show="delgood"><a href="###" title="取消点赞"
              @click="good()" style="color:skyblue">&#xe6d5;</a> <i>{{this.list.blog.likes}}</i></span>
              <span class="iconfont" v-show="col"><a href="###" title="收藏" @click="collect()">&#xe690;</a> <i>{{this.list.blog.favorite}}</i></span>
              <span class="iconfont" v-show="delcol"><a href="###" title="取消收藏" @click="collect()" style="color:skyblue">&#xe6ca;</a> <i>{{this.list.blog.favorite}}</i></span>
              <span class="iconfont"><a href="###" title="评论">&#xe6a4;</a> <i>{{this.list.blog.comments}}</i></span>
              
            </p>
          </div>

          <div class="comment">
            <ul>
              <li class="title">评论</li>
              <li v-show="!list.blog.comments" style="text-indent:1.5rem;"><p>暂无评论</p></li>
              <li v-for="item in listp" :key="item.index">
                <div>
                  <router-link :to='"/userdetails/" + item.user.id' tag="span">
                    <img :src="item.user.photo" alt="">{{item.user.name}}：
                  </router-link>
                  {{item.comment.message}} 
                  <i>{{item.comment.createtime.slice(0,10)}}</i>
                </div>
              </li>
              <li class="send">
                <input type="text" placeholder="发表评论" v-model="sendmess">
                <span @click="send()"><a href="###">发送</a></span>
              </li>
            </ul>
          </div>
        </div>

    </div>
</template>

<script>
import qs from 'qs'
import axios from 'axios'
import {EventBus} from '../../../../static/js/eventBus'
export default {
    name: 'blogdetails',
    data () {
      return {
        user: [],
        add: 0,
        add1: 0,
        fou: '',
        delfou: '',
        god: '',
        delgood: '',
        col: '',
        delcol: '',
        list: [],
        listp: [],
        time: '',
        sendmess: '',
        // del: [],
        isShow: -1,
        blogs: [],
        allblog: [],
        self: true,
      }
    },

    methods: {
      islogin () {
        if (this.user == "") {
          this.$message({
            type: 'warn',
            message: "请先登录！"
          })
        }
      },

      foucs () {
        if (this.user != "") {
          if (this.list.attention == 1) {
          
            this.fou = true
            this.delfou = false
            this.list.attention = 0

            let postData = qs.stringify({
              id: this.list.user.id,
              statue: 1,
            })

            axios.post(`/api/user/attention`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

              if (response.status === 200) {
                console.log(response.data)
              }

            })
            console.log(this.list.attention)
          } else {
            
            this.fou = false
            this.delfou = true
            this.list.attention = 1

            let postData = qs.stringify({
              id: this.list.user.id,
              statue: 0,
            })

            axios.post(`/api/user/attention`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

              if (response.status === 200) {
                console.log(response.data)
              }

            })
            console.log(this.list.attention)
            console.log(this.list)
          }
        }
        else {
          this.$message({
            type: 'warn',
            message: "请先登录！"
          })
        }
      },

      good () {
        if (this.user != "") {
          if (this.list.statue == 1) {
          
            this.god = true
            this.delgood = false
            this.list.statue = 0

            let postData = qs.stringify({
              bid: this.list.blog.id,
              statue: 1
            })

            axios.post(`/api/likeB`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

                if (response.status === 200) {
                  console.log(response.data)
                  this.list.blog.likes --
                } 

            })
            console.log(this.list.attention)
          } else {
            
            this.god = false
            this.delgood = true
            this.list.statue = 1

            let postData = qs.stringify({
              bid: this.list.blog.id,
              statue: 0
            })

            axios.post(`/api/likeB`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

                if (response.status === 200) {
                  console.log(response.data)
                  this.list.blog.likes ++
                } 

            })
            console.log(this.list.statue)
            console.log(this.list)
          }
        
        }
        else {
          this.$message({
          type: 'warn',
          message: "请先登录！"
        })
        }
      },

      collect () {
        if (this.user != "") {
          if (this.list.favorite == 1) {
          
          this.col = true
          this.delcol = false
          this.list.favorite = 0

          let postData = qs.stringify({
            bid: this.list.blog.id,
            favorite: 1
          })

          axios.post(`/api/favoriteB`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

            if (response.status === 200) {
              console.log(response.data)
              this.list.blog.favorite --
            } 

          })
          console.log(this.list.favorite)
        } else {
          
          this.col = false
          this.delcol = true
          this.list.favorite = 1

            let postData = qs.stringify({
              bid: this.list.blog.id,
              favorite: 0
            })

            axios.post(`/api/favoriteB`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

                if (response.status === 200) {
                  console.log(response.data)
                  this.list.blog.favorite ++
                } 

            })
            console.log("favorite"+this.list.favorite)
            // console.log(this.list)
          }
        }
        else {
          this.$message({
            type: 'warn',
            message: "请先登录！"
          })
        }
      },

      send () {
        if (this.user != "") {
          let postData = qs.stringify({
            message: this.sendmess,
          })

          let id = this.$route.params.id

          axios.post(`/api/blog/${id}/write`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

            if (response.status === 200) {
              // this.listp = response.data
              console.log(response.data)
              this.list.blog.comments ++

              let postDatap = qs.stringify({
                page: 1,
              })

              axios.post(`/api/blog/${id}/comments`, postDatap, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

                if (response.status === 200) {
                  this.listp = response.data
                  // this.del.push(false)
                  console.log(this.listp)
                } 
              })
              
            } 

          })
          this.$message({
            type: 'success',
            message: "发表成功！"
          })
        }
        else {
          this.$message({
            type: 'warn',
            message: "请先登录！"
          })
        }
        this.sendmess = ""

        // this.$router.go(0)
      },

      click (index) {
        this.isShow = index
       
        this.$router.go(0)
      },

    },

    created () {
      axios.post(`/api/user/getUser`, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

        if (response.status === 200) {
          if (response.data !== "") {
            this.user = response.data
          }
        } 

      })

      let id = this.$route.params.id

      axios.post(`/api/blog/${id}`, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

        if (response.status === 200) {
          this.list = response.data
          
          this.time = this.list.user.createtime.slice(0,10)
          console.log(this.list)

          if (this.user.id == this.list.user.id) {
            this.self = false
          }

          if (this.list.attention == 1) {
            this.fou = false
            this.delfou = true
          } else {
            this.fou = true
            this.delfou = false
          }
          // console.log(this.list.attention)

          if (this.list.statue == 1) {
            this.god = false
            this.delgood = true
          } else {
            this.god = true
            this.delgood = false
          }

          if (this.list.favorite == 1) {
            this.col = false
            this.delcol = true
          } else {
            this.col = true
            this.delcol = false
          }

          let postData = qs.stringify({
            id: this.list.user.id,
          })

          axios.post(`/api/classBlogs`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

              if (response.status === 200) {
                this.blogs = response.data
                console.log(this.blogs)
                // console.log(this.blogs.length)
                
                for (var i in this.blogs) {
                  // console.log(this.blogs[i])
                  for (var j in this.blogs[i]) {
                    if (this.allblog.length < 10) {
                      this.allblog.push(this.blogs[i][j])
                    }
                    
                    // console.log(this.allblog)
                  }
                  
                }
              } 

          })
         
        } 

      })

      let postDatap = qs.stringify({
        page: 1,
      })

      axios.post(`/api/blog/${id}/comments`, postDatap, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

        if (response.status === 200) {
          this.listp = response.data
          console.log(this.listp)
        } 
      })

    },

    destroyed () {
      // sendmess接收数据
      EventBus.$emit('sendblog',this.list.user);
      
    }

}
</script>

<style lang="stylus" scoped>
.blogdetails
  width 82%
  height 30rem
  margin-top 5rem
  margin-left 13.2%
  position relative
  // background-color red
  .usermess
    width 18%
    height 13rem
    position fixed
    border 1px #ccc solid
    border-radius 10px
    box-shadow: 0 0 0.266667rem rgba(131, 171, 175, 0.5);
    background-color #fff
    .user
      width 100%
      height 5rem
      border-bottom  .05rem #ccc dotted
      // background-color red
      img 
        width 22%
        height 4rem
        border-radius 50%
        margin-left 1rem
        margin-top -1.5rem
      span 
        display inline-block
        margin-left 1rem
        margin-top 1rem
        a
          color #26a2ff
          font-size .9rem
    .mess
      width 100%
      height auto
      margin-top 1rem
      // background-color skyblue
      span
        width 18%
        font-size .9rem
        text-align center
        display inline-block
        // background-color red
        .name
          color #aaa
    .button
      width 100%
      margin-top 1rem
      // background-color red
      span 
        padding .5rem 1rem
        border .05rem #eee solid
        border-radius .3rem
        margin-left 16%
        box-shadow: 0 0 0.066667rem rgba(131, 171, 175, 0.5);
        a
          color #26a2ff
      .fou
        background-color skyblue
        a
          color #fff
      span:hover 
        background-color skyblue
        a
          color #fff
  .sortmain
    width 18%
    position fixed
    min-height 20rem
    margin-bottom 2rem
    background-color #fff
    top 18.5rem
    border .05rem #eee solid
    box-shadow: 0 0 0.266667rem rgba(131, 171, 175, 0.5);
    // background-color red
    ul
      height 100%
      width 100%
      li
        width 92%
        line-height 2.4rem
        padding-left 1.3rem
        position relative
        overflow hidden
        font-size .9rem
        text-overflow ellipsis
        white-space nowrap
        a
          // margin-right 60%
          // color #333
        i
          color #aaa
          font-size .8rem
          position absolute
          right 1rem
        span 
          right 10%
          position absolute
          color #ccc
      li:hover
        background-color #f5f6f7
        a
          color #26a2ff
      .active
        background-color #f5f6f7
        color #26a2ff
      .sorttitle
        width 93.8%
        line-height 2rem
        font-size .9rem
        padding-left 1rem
        background-color #ccc
      .sorttitle:hover
        background-color #ccc
  .detail
    position absolute
    left 23%
    top 0rem
    width 78%
    // background-color red  
    .main
      width 100%
      height auto
      margin-bottom .5rem
      padding 1rem 2rem 0rem 2rem
      box-sizing border-box
      border .05rem #eee solid
      background-color #fff
      .title
        width 90%
        text-align center
        line-height 3rem
        font-size 1.2rem
        color #26a2ff
        // border-bottom #333 .05rem dotted
      .data
        width 90%
        margin-left 5%
        line-height 2rem
        background-color #f5f6f7
        span 
          margin-right 10%
        .sort
          margin-left 4%
          font-size .8rem
      .blog
        width 90%
        margin-top 1rem
        margin-left 5%
        height auto
        text-indent 2rem
        // background-color red
        p
          width 90%
          margin-left 5%
          line-height 1.5rem
          font-size .9rem
          text-indent 2rem
      .icon
        width 97%
        line-height 3rem
        margin-top 2rem
        margin-left -2rem
        padding-left 10%
        margin-bottom 0rem
        border-top .05rem #eee solid
        box-shadow: 0 0 0.266667rem rgba(131, 171, 175, 0.5);
        // background-color skyblue
        span 
          width 10%
          display inline-block
          font-size 1.3rem
          // background-color red
          margin-right 5%
          i 
            font-size 1rem
    .comment
      width 100%
      height auto
      display block
      margin-bottom 2rem
      border .05rem #eee solid
      background-color #fff
      ul
        height auto
        .title
          line-height 2rem
          text-indent 1.7rem
          font-size 1rem
          background-color #ccc
        li
          width 100%
          font-size .8rem
          margin-bottom .5rem
          // background-color red
          div
            width 92%
            padding-left 1.5rem
            // background-color #fff
            img
              width 2.5%
              height 1.5rem
              margin-left 0%
              border-radius 50%
            i
              font-size .7rem
              color #aaa
            a
              position absolute 
              right 4.5rem
        .send
          position relative
          input 
            width 80%
            margin-left 1.5rem
            position absolute
            text-indent 1.8rem
            font-size .8rem
            border .05rem #ccc solid
          span
            padding .3rem 1rem
            margin-left 85%             
            border .05rem #ccc solid
            background-color #fff
            a
              color #26a2ff
          span:hover
            background-color skyblue
            a
              color #fff    
</style>